/* eslint-disable no-unused-vars */
<template>
  <div class="pay">
    <van-cell-group>
      <van-cell class="course-info">
        <img :src="info.courseListImg" alt="" />
        <div class="price-info">
          <span class="course-name">{{ info.courseName }}</span>
          <span class="course-price">￥{{ info.discounts }}</span>
        </div>
      </van-cell>
      <van-cell class="user-info">
        <div>购买信息</div>
        <div>购买课程后需登陆账号后才能学习</div>
        <div class="user-name">
          当前帐号:{{ $store.state.user.organization | handleHid }}
        </div>
      </van-cell>
      <van-cell class="pay-info">
        <div>
          <p>支付方式</p>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell clickable @click="radio = '1'">
                <template #title>
                  <img
                    src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png"
                    alt=""
                  />
                  <span>微信支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell clickable @click="radio = '2'">
                <template #title>
                  <img
                    src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png"
                    alt=""
                  />
                  <span>支付宝支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      <van-button @click="handlePay">￥{{ info.discounts }}立即支付</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getCourseById } from '@/services/course'
// eslint-disable-next-line no-unused-vars
import { createOrder, getPayType, createPayment, getPayResult } from '@/services/pay'

export default {
  name: 'pay',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      info: {},
      radio: '1',
      orderNo: null
    }
  },
  created () {
    this.getCourse()
    this.loadOrder()
  },
  methods: {
    async handlePay () {
      const { data } = await createPayment({
        goodsOrderNo: this.orderNo,
        channel: this.radio === '1' ? 'weChat' : 'aliPay',
        returnUrl: 'http://edufront.agou.com'
      })
      location.href = data.content.payUrl

      const timer = setInterval(async () => {
        const { data: payResult } = await getPayResult({
          orderNo: data.content.orderNo
        })
        if (payResult.content && payResult.content.status === 2) {
          clearInterval(timer)
          this.$toast.success('购买成功')
          this.$router.push({
            name: 'learn'
          })
        } else {
          clearInterval(timer)
          this.$toast.fail('购买失败')
        }
      }, 1000)
    },
    async loadOrder () {
      const { data } = await createOrder({
        goodsId: this.courseId
      })
      this.orderNo = data.content.orderNo
    //   const { data: payInfo } = await getPayType({
    //     shopOrderNo: this.orderNo
    //   })
    },
    async getCourse () {
      const { data } = await getCourseById({ courseId: this.courseId })
      if (data.state === 1) {
        this.info = data.content
      }
    }
  },
  filters: {
    handleHid (item) {
      return item.replace(/^(1[\d]{2})[\d]{4}([\d]{4})$/, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
.pay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.van-cell-group {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.course-info {
  height: 170px;
  padding: 40px 20px 0;
  margin-bottom: 10px;
}
.course-info img {
  width: 80px;
  height: 100px;
  border-radius: 5px;
}
.course-info .van-cell__value {
  display: flex;
}
.course-info .van-cell__value .pay-info {
  height: 100px;
  padding: 10px 20px;
}
.course-info .price-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  padding: 5px 20px;
}
.course-info .course-name {
  font-size: 16px;
}
.course-info .course-price {
  font-weight: 700;
  font-size: 22px;
  color: coral;
}

.user-info div:nth-child(2) {
  font-size: 12px;
  color: #aaa;
}
.user-info .user-name {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.pay-info {
    flex: 1;
}
.pay-info .van-cell {
    padding: 20px 10px;
}
.pay-info .van-cell__value {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pay-info .van-cell__title {
    display: flex;
    align-items: center;
}
.pay-info .van-cell__title img {
    width: 28px;
    height: 28px;
}
.pay-info .van-cell__title span {
    font-size: 16px;
    margin-left: 10px;
}
.van-button {
    background-color: orange;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 22px;
}
</style>
